<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Requests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/user/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/user/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/user/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/user/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<%-- 
    Java Script
    --%>
<script src="resources/user/js/jquery-1.9.1.min.js"></script>
<script src="resources/user/js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="resources/user/js/bootstrap.min.js"></script>
<script src="resources/user/js/jquery.dataTables.js"></script>

<style>
th,td {
	text-align: center;
}
</style>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%">
						<div class="module">
							<div class="module-head">
								<h3>Request Management</h3>
							</div>
							<div class="module-body table">
								<table id="myTable" cellpadding="0" cellspacing="0" border="0"
									style="margin-left: 15px; margin-right: 15px;"
									class="datatable-1 table table-message" width="97%">
									<thead>
										<tr>
											<th>#</th>
											<th>Assignee</th>
											<th>Request</th>
											<th>Action</th>
											<th>Date</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
						<!--/.module-->
					</div>
					<!--/.content-->
				</div>
				<!--/.span9-->
			</div>
		</div>
		<!--/.container-->
	</div>
	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
</body>
<script>
	$(document).ready(
			function() {
				//
				$.getJSON("${pageContext.request.contextPath}/listrequestuserjson.json", {
					ajax : 'true'
				}, function(data) {
					var length = data.length;
					for (var i = 0; i < length; i++) {
						var content = "<tr>";
						content += "<td>" + (i + 1) + "</td>";
						content += "<td>" + data[i].assignee + "</td>";
						content += "<td>" + data[i].request + "</td>";
						content += "<td>" + data[i].status + " </td>";
						content += "<td>" + data[i].date + "</td>";
						content += "</tr>";
						$("#myTable > tbody").append(content);
					}

					$('#myTable').dataTable();
					$('.dataTables_paginate').addClass(
							"btn-group datatable-pagination");
					$('.dataTables_paginate > a').wrapInner('<span />');
					$('.dataTables_paginate > a:first-child').append(
							'<i class="icon-chevron-left shaded"></i>');
					$('.dataTables_paginate > a:last-child').append(
							'<i class="icon-chevron-right shaded"></i>');
					
				});
			}
		);
			
</script>
</html>
